<template>
  <div>
    <div v-if="uploadType === 0">
      <div class="deldiv" @click.stop="onDelete">删除</div>
      名片
      <div
        :style="{ backgroundImage: `url(${getData()[0]})` }"
        class="indexBack"
      >
        <div class="disflex">
          <div class="mingpianBox">
            <!-- 头像 -->
            <img src="../../../../assets/images/profile.jpg" class="imgBox" />
          </div>
          <div class="indexFont">
            <div>姓名:</div>
            <div>公司:</div>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-start">
          <div style="width: 300px">
            <div style="padding-top: 5px">电话:</div>
            <div style="padding-top: 5px">邮箱:</div>
            <div style="padding-top: 5px">地址:</div>
          </div>
          <div>
            <img
              :src="getData()[1]"
              style="width: 70px; height: 70px; border-radius: 5px"
            />
          </div>
        </div>
      </div>
    </div>
    <div v-if="uploadType === 1">
      <div @click.stop="onDelete" class="deldiv">删除</div>
      <!-- 五个ICON -->
      <div
        style="
          display: flex;
          justify-content: space-around;
          font-size: 14px;
          margin-top: 20px;
        "
      >
        <div v-for="(item2, index2) in getData()" :key="index2">
          <div style="width: 70px; text-align: center">
            <div>
              <img :src="item2" class="imgBox1" />
            </div>
            <div>{{ list2[index2] }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="uploadType === 2">
      <div class="deldiv" @click.stop="onDelete">删除</div>
      <!-- 列表 -->
      <div class="title">产品介绍</div>
      <div style="display: flex; justify-content: flex-start; margin-top: 20px">
        <div v-for="(item3) in listinfo" :key="item3.text">
          <div style="margin-right: 10px">
            <div>
              <img src="../../../../assets/images/profile.jpg" class="isImag" />
            </div>
            <div>{{ item3.text }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="uploadType === 3">
      <div @click.stop="onDelete" class="deldiv">删除</div>
      <!-- 行业案例 -->
      <div class="title">行业案例</div>
      <div style="display: flex; justify-content: flex-start; margin-top: 20px">
        <div v-for="(item4, index4) in listinfoHang" :key="index4">
          <div style="margin-right: 10px">
            <div>
              <img
                src="../../../../assets/images/profile.jpg"
                class="isImag2"
              />
            </div>
            <div
              style="
                width: 130px;
                background-color: aqua;
                margin-top: -8px;
                text-align: center;
                padding-top: 5px;
                padding-bottom: 5px;
              "
            >
              {{ item4.text }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="uploadType === 4">
      <div @click.stop="onDelete" class="deldiv">删除</div>
      <!-- 服务案例 -->
      <div class="title">服务客户</div>
      <div style="margin-top: 20px; font-size: 12px">
        <div v-for="(item5, index5) in listpeople" :key="index5">
          <div
            style="
              margin-right: 10px;
              display: flex;
              justify-content: flex-start;
            "
          >
            <div>
              <img
                src="../../../../assets/images/profile.jpg"
                class="isImag3"
              />
            </div>
            <div style="margin-left: 20px">
              <div>{{ item5.title }}</div>
              <div>{{ item5.text }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="uploadType === 5">
      <div @click.stop="onDelete" class="deldiv">删除</div>
      <!-- 关于我们 -->
      <div class="title">关于我们</div>
      <div style="margin-top: 20px; font-size: 12px">
        <div v-for="(item6, index6) in about" :key="index6">
          <div
            style="
              margin-right: 10px;
              display: flex;
              justify-content: flex-start;
            "
          >
            <div>
              <img
                src="../../../../assets/images/profile.jpg"
                class="isImag3"
              />
            </div>
            <div style="margin-left: 20px">
              <div>{{ item6.text }}</div>
              <div>{{ item6.title }}</div>
              <div>{{ item6.aconut }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "card",
  data() {
    return {
      listinfo: [
        {
          text: "测试1",
        },
        {
          text: "测试2",
        },
      ],
      list2: ["存入通讯录", "名片夹", "立即联系", "分享名片", "签署合同"],
      listinfoHang: [
        {
          text: "测试1",
        },
        {
          text: "测试2",
        },
        {
          text: "测试3",
        },
      ],
      listpeople: [
        {
          text: "测试1",
          title: "阿里巴巴",
        },
        {
          text: "测试2",
          title: "阿里巴巴",
        },
        {
          text: "测试3",
          title: "阿里巴巴",
        },
      ],
      about: {
        text: "测试1",
        title: "阿里巴巴",
        aconut: "这是个内容",
      },
    };
  },
  props: {
    uploadType: {
      type: Number,
      required: false
    },
    uploadData: {
      type: [Object, Array],
    },
  },
  methods: {
    onDelete() {
      this.$emit("onDelete");
    },
    getData() {
      if (this.uploadType === 1 || !this.uploadType) {
        return this.uploadData;
      }
      return [];
    },
  },
};
</script>
